<template>
  <div class="table-container">
      <button class="adduser" @click="addBtn">添加用户</button>
    <table border="1">
      <thead>
        <tr style="height:40px">
          <th>姓名</th>
          <th>年龄</th>
          <th>户籍</th>
          <th>电话</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,i) of userList" :key="i">
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>{{item.address}}</td>
          <td>{{item.phone}}</td>
          <td class="btn">
            <button style="width:45%;height:35px" @click="modifyBtn(item)">修改</button>
            <button  style="width:45%;height:35px" @click="userList.splice(i,1)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>

    <!-- 添加用户弹框 -->
    <el-dialog title="添加用户" :visible.sync="dialogVisible" width="30%">
      <el-form  ref="form" label-width="80px">
        <el-form-item label="用户姓名"><el-input v-model="userName" style="width:300px"></el-input></el-form-item>
        <el-form-item label="用户年龄"><el-input v-model="userAge" style="width:300px"></el-input></el-form-item>
        <el-form-item label="用户户籍"><el-input v-model="userAddress" style="width:300px"></el-input></el-form-item>
        <el-form-item label="用户电话"><el-input v-model="userPhone" style="width:300px"></el-input></el-form-item>
      </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="sureBtn">确 定</el-button>
    </span>
  </el-dialog>

  <!-- 修改用户弹框 -->
  <el-dialog title="修改用户" :visible.sync="modify" width="30%">
      <el-form  ref="form" label-width="80px">
        <el-form-item label="用户姓名"><el-input v-model="user_name" style="width:300px"></el-input></el-form-item>
        <el-form-item label="用户年龄"><el-input v-model="user_age" style="width:300px"></el-input></el-form-item>
        <el-form-item label="用户户籍"><el-input v-model="user_address" style="width:300px"></el-input></el-form-item>
        <el-form-item label="用户电话"><el-input v-model="user_phone" style="width:300px"></el-input></el-form-item>
      </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="modify = false">取 消</el-button>
      <el-button type="primary" @click="clicksureBtn">确 定</el-button>
      <!-- @click="sureModifyBtn" -->
    </span>
  </el-dialog>

  </div>
</template>

<script>

export default {
  data(){
    return{
      dialogVisible:false,//添加弹框默认隐藏
      userName:'',//添加用户姓名
      userAge:24,//添加用户年龄
      userAddress:'',//添加用户户籍
      userPhone:15680160824,//添加用户电话
      
      modify:false,//修改弹框默认隐藏

      user_name:'',
      user_age:24,
      user_address:'',
      user_phone:15680160824,

      userList:[
        {
          name:'张三',
          age:24,
          address:'四川',
          phone:15680160824
        },
        {
          name:'李四',
          age:25,
          address:'安徽',
          phone:17480160846
        },
      ]
    }
  },


  methods: {

    // 点击显示弹窗
    addBtn(){
      this.dialogVisible = true
    },

    // 确定添加
    sureBtn(){
        this.userList.push({ name:this.userName,age:this.userAge,address:this.userAddress,phone:this.userPhone})
    },

    // 修改
    modifyBtn(item){
      console.log(item)

         this.modify = true  // 点击编辑，显示模态框

         this.user_name = item.name;
         this.user_age = item.age;
         this.user_address = item.address;
         this.user_phone = item.phone;

        this.clickitem = item; 
    },

    // 确认修改
    clicksureBtn(){
      this.clickitem.name=  this.user_name
      this.clickitem.age =  this.user_age
      this.clickitem.address = this.user_address
      this.clickitem.phone = this.user_phone

       this.modify = false
    }
  }
}
</script>

<style scoped lang="less">
  .table-container{
    width: 100%;
    height: 100%;
    background: #fff;
    padding: 10%;
    // display: flex;
    // justify-content: center;
    // align-items: center;

    .adduser{
      width: 150px;
      height: 40px;
    font-size: 18px;
    }

    table{
      background: #ccc;
      width:70%;
      border-collapse: collapse;
      
      tr{
        text-align: center;

        .btn{
          height: 40px;
          display: flex;
          justify-content: space-around;
          align-items: center;
        }
      }
    }
  }
</style>
